<template>
    <div class="title flex flex-jc-sb">
        <div class="title fs-16 bold mg-b-20">账号额度配置</div>
        <div class="option-box reset-select">
            <el-select v-model="selectValue" class="set-width" placeholder="请选择" size="small" multiple collapse-tags>
                <el-option v-for="(item, index) in options" :key="index" :label="item.bankName" :value="item.id" />
            </el-select>
        </div>
    </div>
    <div class="flex flex-wrap fs-14 gap-16px">
        <div v-for="(i, index) in inputList" :key="index" class="flex items-center flex-item">
            <div class="left flex-no-shrink mg-r-20">{{ i.name }} :</div>
            <el-input class="flex-1" v-model="i.value" :placeholder="i.placeholder" clearable :disabled="i.readonly">
                <template #append>{{ i.append }}</template>
            </el-input>
        </div>
    </div>
    <div class="button-box flex flex-jc-c mg-t-20">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button>取消</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAccountListByChannelId, updateLimitInfo } from 'api/tools/accountLimit.ts'

const props = defineProps({
    channelId: {
        type: [String, Number]
    }
})
const selectValue = ref([])
const options = ref([])
const input2 = ref('')
const inputList = ref([
    {
        name: '年累计充值额度上限',
        prop: 'maxInvoiceAmount',
        value: '',
        placeholder: '请输入',
        append: '元'
    },
    {
        name: '年累计开票额度上限',
        prop: 'maxRcptAmount',
        value: '',
        placeholder: '请输入',
        append: '元'
    },
    {
        name: '收款不足空间提醒',
        prop: 'notifyAmt',
        value: '',
        placeholder: '',
        append: '元',
        readonly: true
    }
])

const getAccountList = () => {
    getAccountListByChannelId({
        channelId: props.channelId,
        pageSize: 9999,
    }).then(res => {
        options.value = res.list || []
        if (options.value?.length) {
            selectValue.value = []
            const firstOption = options.value[0]
            selectValue.value.push(firstOption.id)
            inputList.value.forEach(i => {
                i.value = firstOption[i.prop]
            })
        }
    })
}

const submit = () => {
    const data = []
    if (selectValue.value.length) {
        const inputData = {}
        inputList.value.forEach(i => {
            if (i.prop!=='notifyAmt') {
                inputData[i.prop] = i.value
            }
        })
        selectValue.value.forEach(i=> {
            data.push({
                id: i,
                ...inputData
            })
        })
    } else {
        ElMessage.warning({
            message: '请先选择账号'
        })
        return
    }

    updateLimitInfo(data).then(res => {
        ElMessage.success({
            message: '保存成功'
        })
    })
}

watch(() => props.channelId, (newval) => {
    if(newval) {
        getAccountList()
    }
}, {
    immediate: true
})
</script>
<style lang="scss" scoped>
.left {
    min-width: 160px;
}

.flex-item {
    width: calc(50% - 10px);
}

.gap-16px {
    gap: 20px;
}
.set-width {
    width: 300px;
}
:deep(.reset-select .el-input__wrapper) {
    box-shadow: none;
    background: transparent;
}
:deep(.reset-select .el-select) {
    --el-select-border-color-hover: transparent;
    --el-select-input-focus-border-color: transparent;
    --el-input-text-color: var(--el-color-black);
}
</style>